<template>
  <view class="wapper">
    <u-navbar
      :title="$t('order.payment-successful')"
      bgColor="#F6F6F6"
      @leftClick="goback"
      titleStyle="font-size: 32rpx;font-weight: 500;color: #000000;"
      placeholder
    >
    </u-navbar>
    <image
      src="@/static/image/bourse/success_icon.png"
      mode=""
      class="my-image"
    ></image>
    <view class="tips"> {{$t('order.payment-successful')}} </view>

    <view class="my-btn btn-successful" @click="gotoPage('checkOrder')">
      {{$t('friend.viewphotos')}}
    </view>
    <view style="height: 40rpx"> </view>
    <view class="my-btn btn-plain" @click="gotoPage('tradingCenter')">
      {{$t('friend.Dating')}}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  // 监听页面返回
  onBackPress(options) {
    if (options.from === "navigateBack") {
      return false;
    }
    this.goBack();
    return true;
  },
  methods: {
    gotoPage(val) {
      if (val == "checkOrder") {
        uni.navigateTo({
          url: `/pages/makefriends/PersonalHomepage?userPersonalsId=${this.userPersonalsId}`,
        });
      } else if (val == "tradingCenter") {
        uni.switchTab({
          url: '/pages/makefriends/MakeFriends'
        })
      }
    },
    goback() {
      uni.switchTab({
        url: '/pages/makefriends/MakeFriends'
      })
    },
  },
  onLoad(option){
    this.userPersonalsId=option.userPersonalsId
  }
};
</script>

<style lang="scss" scoped>
.wapper {
  display: flex;
  flex-direction: column;
  align-items: center;

  .my-image {
    margin-top: 200rpx;
    width: 300rpx;
    height: 200rpx;
  }

  .tips {
    margin: 100rpx 0;
    font-weight: 500;
    font-size: 32rpx;
    font-family: HarmonyOS Sans-Medium, HarmonyOS Sans;
    color: #000000;
  }

  .my-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 336rpx;
    height: 88rpx;
    border-radius: 96rpx;
    font-size: 28rpx;
    font-family: Source Han Sans CN-Medium, Source Han Sans CN;
    font-weight: 500;
  }

  .btn-successful {
    color: #ffffff;
    background: #61bdb2;
  }

  .btn-plain {
    background-color: #ffffff;
    color: #61bdb2;
    border: 2rpx solid #61bdb2;
  }
}
</style>
